<template>
	<view>
		<view class="cont">
			<view class="title">{{detail.title}}</view>
			<view class="desc">
				<rich-text :nodes="up_describe | filterCont(up_describe)"></rich-text>
			</view>
			<view class="rule solid-bottom" @click="$refs.isRulePopup.show()">查看交易规则 >></view>
			<view class="input solid-bottom text-ss">
				<text>券码：</text>
				<input type="text" v-model="code" placeholder="可选填" />
			</view>
			<view class="hint">请上传您的券码图片：（仅限一张券码图片）</view>

			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='icon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='icon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		
		<v-fromid>
			<bottom-bar buttonText="确认" @submit="onSubmit"></bottom-bar>
		</v-fromid>
		
		<!-- 交易规则 -->
		<buy-hint ref="isRulePopup" title="交易规则" top="30">
			<scroll-view style="height: 600rpx;" scroll-y>
				<rich-text :nodes="nodes | filterCont(nodes)"></rich-text>
			</scroll-view>
			<view @click="$refs.isRulePopup.close()" class="cu-btn bg-green round shadow margin-top">我知道了</view>
		</buy-hint>
		
		<buy-hint ref="isBuyHintPopup" top="50" title="提交成功">
			<view class="text-gray text-center">
				您的券码已提交给系统，待审核通过，用户购买使用后，您可收到返款
			</view>
			<button @click="onCallBack" style="width: 200rpx;" class="cu-btn bg-green round shadow-blur margin-top-lg">确 定</button>
		</buy-hint>
		
		<accredit ref="showPicker" @userInfo="GetUserSuccess"></accredit>
	</view>
</template>

<script>
	import BuyHint from "@/components/BuyHint.vue"
	import BottomBar from "@/components/BottomBar.vue"
	import vFromid from "@/components/fromid/fromid.vue"
	import TicketApi from "@/Api/Ticket.js"
	import HelpApi from "@/Api/Help.js"
	import TabApi from "@/Api/Tab.js"
	import { HTTP } from "@/utils/http.js"
	import { toast, alert } from "@/utils/util.js"
	const HttpApi = new HTTP()

	export default {
		components: {
			BottomBar,
			BuyHint,
			vFromid
		},
		data() {
			return {
				detail: null,
				nodes: '',
				up_describe: '',
				id: null,
				code: '',
				imgList: []
			}
		},
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			}
		},
		filters: {
			filterCont(cont) {
				if(cont) {
					return cont.replace(/\<img/gi, '<img style="max-width: 100%;" ')
				} else {
					return ''
				}
		  }
		},
		onLoad(obj) {
			this.id = obj.id
			this.getDetail(obj.id)
			HelpApi.regulation()
				.then(res=> this.nodes = res)
		},
		methods: {
			getDetail(id) {
				TabApi.getSellTicketDetail(id)
					.then(res=> {
						 this.detail = res
						 this.up_describe = res.up_describe
					})
			},
			// 微信用户授权方法回调
			GetUserSuccess(e) {
				this.$refs.showPicker.close();
			},
			// 选择图片
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => this.CompressImage(res.tempFilePaths[0])
				});
			},
			// 压缩图片质量
			CompressImage(imgUrl) {
				console.log(imgUrl)
				uni.compressImage({
					src: imgUrl,
					quality: 60,
					success: res => this.imgList.push(res.tempFilePath)
				})
			},
			
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			onSubmit() {
				if (this.userAccredit) {
					this.$refs.showPicker.show()
					return
				}
				if (this.imgList.length <= 0 && this.code == '') {
					toast('至少填写一项')
					return
				}
				let imgList = this.imgList
				uni.showLoading({
					title: '提交中'
				})
				if(imgList.length > 0) {
					HttpApi.uploadFile(imgList)
						.then(res => {
							let img = res[0]
							this.ToickAdd(img)
						})
						.catch(err => {
							uni.hideLoading()
							toast(err)
						})
				} else {
					this.ToickAdd()
				}
			},
			
			ToickAdd(img = '') {
				TicketApi.ToickAdd(img, this.id, this.code)
					.then(res => {
						uni.hideLoading()
						this.$refs.isBuyHintPopup.show()
					})
			},

			onCallBack() {
				this.$refs.isBuyHintPopup.close()
				setTimeout(() => uni.navigateBack(), 500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.cont {
		padding: 40rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.desc {
			font-size: 26rpx;
			color: #333333;
			line-height: 37rpx;
			margin-bottom: 20rpx;
		}

		.rule {
			font-size: 30rpx;
			color: #FF9910;
			text-align: center;
			padding-bottom: 30rpx;
		}

		.hint {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			margin: 30rpx 0;
		}

		.cu-form-group {
			padding: 0;

			.bg-img {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 25vh;
				}
			}
		}

		.input {
			display: flex;
			align-items: center;
			height: 80rpx;

			text {
				width: 100rpx;
			}

			input {
				flex: 1;
			}
		}
	}
</style>
